<template>
  <view>
    <u-navbar
      title="开通会员"
      bgColor="#f0f8f5"
      :autoBack="true"
      :fixed="false"
      leftIconColor="#333"
    >
    </u-navbar>
    <view
      class="user-info-box"
      style="position: relative; padding-left: 24rpx; background-color: #f0f8f5;padding-bottom: 32rpx;"
    >
      <view class="portrait-box">
        <image
          class="portrait"
          :src="userinfo.picx || '/static/ucenter/missing-face.png'"
        ></image>
      </view>
      <view class="info-box" style="margin-left: 20upx">
        <view style="display: flex; align-items: center; margin-bottom: 8rpx">
          <text class="username">{{ userinfo.nichen || userinfo.name }}</text>
          <image
            v-if="userinfo.vip == '1'"
            src="/static/user-center/vip.png"
            style="height: 34rpx; width: 49rpx; margin-left: 7rpx"
          ></image>
        </view>
        <text
          style="font-size: 22rpx; color: #999999; line-height: 33rpx"
          v-if="userinfo.vip == '1'"
          >会员到期时间：{{ userinfo.vipday }}</text
        >
      </view>

      <!-- <view class="vip" > -->
      <!-- </view> -->
    </view>
    <!-- <view class="nav" :style="{ paddingTop: statusBarHeight + 'px' }">
			<image class="nav-back" src="/static/vip/back.png" mode="" @click="back"></image>
			<text class="nav-title">开通VIP</text>
			<view class="nav-space"></view>
		</view> -->

    <!-- <view class="info" :style="{ marginTop: statusBarHeight + 44 + 'px' }">
      <image class="info-bg" src="/static/vip/info-bg.png" mode=""></image>

      <view class="info-content">
        <view class="info-avatar">
          <image class="info-avatar-pic" :src="userinfo.picx" mode=""></image>
        </view>
        <view class="info-name">
          <text class="info-name">{{ userinfo.nichen || userinfo.name }}</text>
          <text v-if="userinfo.vip == 0" class="info-level"
            >开通会员畅享尊贵特权</text
          >
          <text v-else class="info-level">{{ userinfo.viptime }}</text>
        </view>
      </view>

      <view class="info-asset">
        <view class="info-asset-item">
          <text class="iai-title">会员</text>
          <text v-if="userinfo.vip == 1" class="iai-value">{{
            userinfo.vipday
          }}</text>
          <text v-else class="iai-value">未开通</text>
        </view>
        <view class="info-asset-item">
          <text class="iai-title">{{ userinfo.cion_name }}</text>
          <text class="iai-value">{{ userinfo.cion }}</text>
        </view>
        <view class="info-asset-item">
          <text class="iai-title">月票</text>
          <text class="iai-value">{{ userinfo.ticket }}</text>
        </view>
      </view>
    </view> -->
    <view class="main-title" style="background: #ffffff;">
      <text>{{ userinfo.vip == "1" ? "续费" : "开通" }}会员</text>
    </view>
    <scroll-view scroll-x style="background: #ffffff">
      <view class="recharge">
        <view
          class="recharge-item"
          :class="current == index ? 'recharge-item-active' : ''"
          v-for="(item, index) in list"
          :key="index"
          :style="{
            marginLeft: !index ? '24rpx' : '',
          }"
          @click="rechargeChange(index)"
        >
          <view class="recharge-tag" v-if="item.day == 365"> </view>
          <text class="recharge-item-duration">{{VipMap.get(item.day)}}</text>
          <view class="recharge-item-price">
            <text class="rmb">￥</text>
            <text>{{ item.rmb }}</text>
          </view>
          <!-- <text
            :class="
              current == index ? 'recharge-item-active' : 'recharge-item-des'
            "
            style="font-size: 20rpx; background: none"
          >
            畅想会员权益
          </text>
          <text
            :class="
              current == index ? 'recharge-item-active' : 'recharge-item-des'
            "
            style="font-size: 20rpx; background: none"
          >
            乐享尊贵
          </text> -->
        </view>
      </view>
    </scroll-view>
    <view style="background-color: #fff">
      <view
        @click="agree ? (agree = false) : (agree = true)"
        style="
          font-size: 24rpx;
          color: #747474;
          display: flex;
          align-items: center;
          padding: 48rpx 0 0 26rpx;
        "
      >
        <view v-if="agree">
          <u-icon
            color="#2796ff"
            size="14"
            name="checkmark-circle-fill"
          ></u-icon>
        </view>
        <view v-else>
          <u-icon color="#777777" size="14" name="checkmark-circle"></u-icon>
        </view>
        <view style="margin-left: 16rpx">
          <text
            >同意并接受<text @click="openDialog('漫画付费会员服务条款')"
              >《漫画付费会员服务条款》</text
            ></text
          >
        </view>
      </view>
      <view
        class="button update"
        hover-class="hover"
        @click="updateNow"
        v-if="list.length > 0"
        style="margin: 0 24rpx; margin-top: 24rpx"
      >
        <text v-if="userinfo.vip == 0" class="button-text"
          >立即开通￥{{ list[current] ? list[current].rmb : 0 }}</text
        >
        <text v-else class="button-text"
          >立即续费{{ list[current] ? list[current].rmb : 0 }}</text
        >
      </view>
    </view>

    <!-- <text class="tip">升级得800金币</text> -->
    <!-- <view style="background-color: #f5f5f5; height: 24rpx"></view> -->
    <view
      class="main-title"
      style="background-color: #fff; padding-top: 72rpx; padding-bottom: 22rpx"
    >
      <text>会员权益</text>
    </view>

    <view style="background-color: #fff">
      <view class="privilege">
        <view
          class="privilege-item"
          v-for="(item, index) in privilegeList"
          :key="index"
          hover-class="hover"
          @click="privilegeClick(index)"
        >
          <!-- <image class="privilege-item-pic" :src="item.pic" mode=""></image> -->
          <view
            style="
              display: flex;
              flex-direction: column;
              /* align-items: center; */
            "
          >
            <text
              style="
                font-size: 28rpx;
                font-weight: 500;
                line-height: 40rpx;
                color: #333333;
                margin-bottom: 8rpx;
              "
              >{{ item.text }}</text
            >
            <text
              style="font-size: 20rpx; line-height: 28rpx; color: #999999"
              >{{ item.sub }}</text
            >
          </view>
        </view>
      </view>
    </view>
    <u-popup
      mode="bottom"
      :show="pop_show"
      :round="16"
      :closeOnClickOverlay="false"
    >
      <view style="display: flex; flex-direction: column; width: 100%">
        <view
          style="
            display: flex;
            height: 100rpx;
            justify-content: space-between;
            line-height: 100rpx;
            padding: 0 30rpx 0 30rpx;
          "
        >
          <view
            style="
              display: inline-block;
              font-size: 32rpx;
              font-weight: 500;
              color: #000;
            "
          >
            <text>{{ pop_title }}</text>
          </view>
          <view style="display: flex; margin: auto 0" @click="pop_show = false">
            <u-icon color="#777777" size="16" name="close"></u-icon>
          </view>
        </view>
        <scroll-view
          style="padding: 0 30rpx; width: calc(100% - 60rpx); height: 70vh"
          scroll-y="true"
        >
          <p v-html="pop_content"></p>
        </scroll-view>
        <view style="height: 10px"></view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import w_md5 from "../../../js_sdk/zww-md5/w_md5.js";
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
const VipMap= new Map()
VipMap.set('30','月度会员')
VipMap.set('90','季度会员')
VipMap.set('180','半年会员')
VipMap.set('365','年会员')
export default {
  components: {
    w_md5,
  },
  data() {
    return {
      userinfo: "",
      pop_show: false,
      pop_title: "",
      pop_content: "",
      statusBarHeight,
      current: 0,
      list: [],
      VipMap,
      agree: false,
      privilegeList: [
        {
          pic: "/static/vip/speed.png",
          text: "购漫8折",
          sub: "8折畅读漫画",
        },
        {
          pic: "/static/vip/share.png",
          text: "会员礼包",
          sub: "领取专属大礼包",
        },
        {
          pic: "/static/vip/active.png",
          text: "月票翻倍",
          sub: "获得翻倍月票",
        },
        {
          pic: "/static/vip/birthday.png",
          text: "会员标识",
          sub: "获得专属标识",
        },
        {
          pic: "/static/vip/notic.png",
          text: "任务金币翻倍",
          sub: "获得翻倍金币",
        },
        {
          pic: "/static/vip/kefu.png",
          text: "签到补签",
          sub: "获得补签权益",
        },
      ],
    };
  },
  onShow() {
    this.req_userinfo();
    this.req_data();
    this.popContent = uni.getStorageSync("txt");
  },
  methods: {
    rechargeChange(index) {
      this.current = index;
    },
    openDialog(value) {
      this.pop_title = value;
      this.pop_content = this.popContent.comicpaidmembership;
      this.pop_show = true;
    },
    updateNow() {
      if (!this.agree) {
        uni.showToast({
          icon: "none",
          position: "bottom",
          title: "请先同意服务协议",
        });
        return;
      }
      uni.navigateTo({
        url:
          "pay/pay?rmb=" +
          this.list[this.current].rmb +
          "&day=" +
          this.list[this.current].day,
      });
      // uni.showToast({
      // 	icon: "none",
      // 	title: `选择了「${this.list[this.current].rmb}」`
      // })
    },
    privilegeClick(index) {
      // uni.showToast({
      // 	icon: "none",
      // 	title: `点击了「${this.privilegeList[index].text}」`
      // })
    },
    back() {
      uni.navigateBack({});
    },
    req_data() {
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;
      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&timestamp=" +
        time +
        "&user_id=" +
        uni.getStorageSync("user").uid +
        "&user_token=" +
        uni.getStorageSync("user").utoken;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/pay/init?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log("数据: ", res.data);
          if (res.data.code == 1) {
            // this.userinfo = res.data.user
            this.list = res.data.viplist;
            // this.data = res.data
          } else {
            uni.showToast({
              icon: "none",
              position: "bottom",
              title: "请求失败",
            });
            uni.navigateBack({});
          }
          // this.get_comment_list()
        },
      });
    },
    req_userinfo() {
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;

      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&timestamp=" +
        time +
        "&user_id=" +
        uni.getStorageSync("user").uid +
        "&user_token=" +
        uni.getStorageSync("user").utoken;

      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/user/index?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log("用户信息：", res.data);
          this.userinfo = res.data.user;
        },
      });
    },
  },
};
</script>

<style lang="scss">
.main-title {
  padding: 33rpx 32rpx 9rpx 32rpx;
  font-size: 34rpx;
  color: #1c1c1c;
  //   margin: 33rpx 0 29rpx 0;
}
page {
  //   background-color: #f5f5f5;
}
.tip {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #a5a3a2;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 465rpx;
  z-index: -1;

  &-img {
    width: 100%;
    height: 100%;
  }
}

.hover {
  opacity: 0.7;
}

.nav {
  position: fixed;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 750rpx;
  height: 44px;
  padding: 0 30rpx;
  // background-image: url('~@/static/vip/nav-bg.png');
  background-size: 100%;
  z-index: 99;

  &-back {
    width: 20rpx;
    height: 40rpx;
  }

  &-title {
    color: #333333;
    font-size: 34rpx;
  }

  &-space {
    width: 70rpx;
    height: 40rpx;
  }
}

.info {
  position: relative;
  padding: 0 15rpx;
  width: 730rpx;
  height: 360rpx;

  &-bg {
    position: absolute;
    width: 730rpx;
    height: 360rpx;
    z-index: -1;
  }

  &-content {
    padding: 70rpx 50rpx 0 50rpx;
    margin-bottom: 50rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  &-avatar {
    margin-right: 30rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 85rpx;
    height: 85rpx;
    background-color: #fff;
    padding: 1rpx;
    border-radius: 50%;

    &-pic {
      width: 83rpx;
      height: 83rpx;
      border-radius: 50%;
    }
  }

  &-name {
    display: flex;
    flex-direction: column;
    color: #ffffff;
    font-size: 35rpx;
  }

  &-level {
    margin-top: 15rpx;
    font-size: 24rpx;
  }

  &-asset {
    padding: 0 50rpx;
    display: flex;
    flex-direction: row;
    align-items: center;

    &-item {
      display: flex;
      flex-direction: column;
    }
  }
}

.iai {
  &-title {
    margin-bottom: 20rpx;
    margin-right: 100rpx;
    font-size: 24rpx;
    color: #cfb386;
  }

  &-value {
    font-size: 35rpx;
    color: #ffffff;
  }
}

.recharge {
  position: relative;
  //   margin-bottom: 35rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 19rpx;
  &-tag {
    position: absolute;
    top: -19rpx;
    left: 0;
    width: 139rpx;
    height: 36rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-image: url("./images/tag.png");
    background-size: 100% 100%;

    &-text {
      font-size: 20rpx;
      color: #ffffff;
      text-align: center;
    }
  }

  &-item {
    position: relative;
    margin-left: 13rpx;
    width: 210rpx;
    height: 248rpx;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 16rpx;
    border: 1px solid #cdcdcd;
    color: #333;
    &-des {
      font-size: 22rpx;
      color: #999;
    }
    &-duration {
      margin-bottom: 30rpx;
      font-size: 26rpx;
    }

    &-price {
      margin-bottom: 20rpx;
      display: flex;
      flex-direction: row;
      align-items: baseline;
      font-size: 32rpx;
      font-weight: 500;
    }
    &-active {
      background: #f0f8f5;
      border: 2rpx solid #50cca6;
    }
  }
}

.button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 85rpx;
  border-radius: 50rpx;

  background: linear-gradient(270deg, #4dcba5 0%, #6bd6b5 100%);
  &-text {
    font-size: 34rpx;
    font-weight: 500;
    color: #fff;
  }
}

.privilege {
  margin: 0 32rpx;
  margin-bottom: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #fff;
  flex-wrap: wrap;
  &-item {
    display: flex;
    align-items: center;
    margin-right: 2rpx;
    margin-bottom: 2rpx;
    width: 210rpx;
    height: 113rpx;
    background: #f0f8f5;
    border-radius: 16rpx;
    justify-content: center;
    // align-items: center;
    margin-bottom: 22rpx;
    text-align: center;
    &-pic {
      width: 80rpx;
      height: 80rpx;
      margin-left: 24rpx;
    }

    &-text {
      font-size: 24rpx;
      color: #383738;
    }
  }
}

.user-info-box {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  padding-top: 30rpx;
  .portrait {
    width: 130upx;
    height: 130upx;
    border: 5upx solid #fff;
    border-radius: 50%;
  }

  .username {
    font-size: 32upx;
    color: #303133;
    line-height: 47rpx;
  }

  .vip {
    height: 32rpx;
    width: 32rpx;
    margin-left: 2px;
    margin-right: auto;
  }
}
</style>
